<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入样式 -->

  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/style.css">

  <!-- 引入组件库 -->

  <script src="../js/vue.js"></script>

  <script src="../element-ui/lib/index.js"></script>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script src="../js/axios-0.18.0.js"></script>


</head>
<style scoped>
  .chat-window {
    padding: 20px;
  }
  .empty-chat-window {
    text-align: center;
    padding-top: 50px;
    color: #999;
  }
  .message {
    margin-bottom: 10px;
  }
</style>

<body>
<div id="app">
  <el-container>
    <el-header>
      <h1><i class="el-icon-cloudy"></i>私信</h1>
    </el-header>
    <el-main>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><a href="../index">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>私信</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col  >
          <el-card>
            <div slot="header" class="clearfix">
              <span><i class="el-icon-s-promotion"></i>聊天</span>
            </div>
            <div >
              <template>
                <el-container style="height: 100vh;">
                  <el-aside width="200px">
                    <!-- 联系人列表 -->
                    <el-menu :default-active="activeName" class="el-menu-vertical-demo" @select="handleContactClick">
                      <el-menu-item v-for="(contact, index) in conversationList" :key="index" :index="contact.partner.uid">
                        {{ contact.partner.nickname }}
                      </el-menu-item>
                    </el-menu>
                  </el-aside>
                  <el-container>
                    <el-header>{{ partnernickname }}</el-header>
                    <el-main>



                      <el-input v-model="messageContent" placeholder="请输入消息"></el-input>
                      <el-button @click="sendMessage" type="primary">发送</el-button>
                      <!-- 聊天窗口 -->
                      <div v-if="selectedContact !== null" class="chat-window">


                        <div class="topic--replies">
                          <ul class="nav">
                            <li v-for="message in  conversation">
                              <!-- Topic Reply Start Left -->
                              <div v-if="message.sendId == userInfo.uid" class="topic--reply">
                                <div class="body clearfix">
                                  <div class="author ml--20 float--right text-center">
                                    <div class="role text-uppercase">

                                      <p class="date float--right">
                                      <a :href="'member-personal.html?id=' + userInfo.id">
                                        <el-avatar :src="'../' + userInfo.avatar" :size="40" fit="cover"></el-avatar>
                                      </a>
<!--                                      {{userInfo.nickname}}-->
                                      {{message.timeStr}}
                                      </p>

                                      <p>{{message.content}}</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div v-if="message.sendId != userInfo.uid" class="topic--reply">
                                <div class="body clearfix">
                                  <div class="author ml--20 float--right text-center">
                                    <div class="role text-uppercase">

                                      <p class="date float--right">
                                        <a :href="'member-personal.html?id=' + userInfo.id">
                                          <el-avatar :src="'../' + message.partner.avatar" :size="40" fit="cover"></el-avatar>
                                        </a>
                                        <!--                                      {{userInfo.nickname}}-->
                                        {{message.timeStr}}
                                      </p>

                                      <p>{{message.content}}</p>
                                    </div>
                                  </div>
                                </div>
                              </div>

                            </li>
                          </ul>
                        </div>


<!--                        <div v-for="(con, index) in conversation" :key="index" class="user">-->

<!--&lt;!&ndash;                          <el-avatar :src="'../' + user.avatar" :size="100" fit="cover"></el-avatar>&ndash;&gt;-->
<!--                          {{ con }}-->
<!--                        </div>-->


                      </div>
                      <div v-else class="empty-chat-window">请选择联系人开始聊天</div>
                    </el-main>
                  </el-container>
                </el-container>
              </template>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>


</div>


<script>
  new Vue({
    el: '#app',
    data() {
      return {
        userInfo: {},
        partnernickname : '',
        partnerId: "",
        conversationList: {},
        activeName: '0',
        conversation: {},
        contacts: [
          { name: '联系人1' },
          { name: '联系人2' },
          { name: '联系人3' },
        ],
        selectedContact: null,
        messages: [],
        messageContent: ""
      };
    },
    created() {
      this.loadUser();
      this.loadConversationList();
      this.partnerId = sessionStorage.getItem("id");
      if (this.partnerId != null){
        this.handleContactClick(this.partnerId);
      }
      if(this.conversation == null){

      }
    },
    methods: {

      loadUser(){
        axios.get('/users/loadUser').then(res => {
          console.log(res.data.data);
          this.userInfo = res.data.data;
          console.log(this.userInfo);
        });
      },
      loadConversationList() {
        axios.get('/message/conversationList').then(res => {
          // console.log(res.data);
          this.conversationList = res.data;
          console.log(this.conversationList);
        } );
      },
      handleContactClick(index) {
          console.log(index);
          this.selectedContact = index;
          axios.get('/message/conversation?partnerId=' + index).then(res => {
            // console.log(res.data);
            this.conversation = res.data;
            this.partnernickname = this.conversationList[0].partner.nickname;
            console.log(this.conversation);
          });
        },
      sendMessage() {
        const _this = this;
        axios.post("/message/sendMessage", {
          sendId: _this.userInfo.uid,
          receiveId: _this.partnerId,
          content: _this.messageContent
        }).then(function (res) {
          console.log(res);
          if (res.data.code == 20011) {
            _this.handleContactClick(res.data.data.receiveId);
            _this.messageContent = "";
          }
        });
      },
    },
  });
</script>
</body>
</html>